<template>
    <div class="xxxxxxxxxxxxxxxyyyyyyyyyy">
        <h2>用户列表</h2>
        <button @click="fetchUsers">获取用户数据</button>
        <div v-if="loading">加载中...</div>
        <div v-else>
            <pre>{{ userList }}</pre>
            <ul>
                <li v-for="user in userList" :key="user.name">
                    {{ user.name }} - {{ user.age }}岁
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'UserList',
    data() {
        return {
            userList: [],
            loading: false,
            error: null
        }
    },
    methods: {
        async fetchUsers() {
            this.loading = true;
            this.error = null;

            try {
                // 注意后端需要避免跨域访问的问题，可通过在后端User1Controller添加跨域访问支持：
                // @CrossOrigin(origins = "http://localhost:8082")
                const response = await axios.get('http://localhost:8080/api/user1/list');
                console.log('API返回数据:', response.data); // 打印到控制台

                // 假设返回的数据格式是：[{"name":"张三","age":25}, ...]
                this.userList = response.data;

                // 打印每个用户信息
                this.userList.forEach(user => {
                    console.log(`姓名: ${user.name}, 年龄: ${user.age}`);
                });

            } catch (error) {
                console.error('获取用户数据失败:', error);
                this.error = '获取用户数据失败，请重试';
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>

<style scoped>
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 8px 0;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

pre {
    background: #f0f0f0;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
}
</style>